<!-- 库存管理 -->
<template>
    <div class="gas">
        <div class="title">
            <div class="left-title">
                气体监测
                <span>单位：mg/m³</span>
            </div>
            <div class="more">></div>
        </div>
        <div class="line"></div>
        <div class="content">
            <div class="detail bottom">
                <div class="box">
                    <img class="flashing-image" v-if="true" src="@/assets/images/digitalProduction/warning.png" alt="">
                    <div class="d_2">甲烷</div>
                    <div class="d_3">52.32</div>
                </div>
                <div class="box">
                    <img class="flashing-image" v-if="false" src="@/assets/images/digitalProduction/warning.png" alt="">
                    <div class="d_2">氨气</div>
                    <div class="d_3">65.90</div>
                </div>
                <div class="box">
                    <img class="flashing-image" v-if="false" src="@/assets/images/digitalProduction/warning.png" alt="">
                    <div class="d_2">甲烷总烃</div>
                    <div class="d_3">278.8</div>
                </div>
            </div>
            <div class="detail">
                <div class="box">
                    <img class="flashing-image" v-if="true" src="@/assets/images/digitalProduction/warning.png" alt="">
                    <div class="d_2">硫化氢</div>
                    <div class="d_3">52.32</div>
                </div>
                <div class="box">
                    <img class="flashing-image" v-if="false" src="@/assets/images/digitalProduction/warning.png" alt="">
                    <div class="d_2">甲硫醚</div>
                    <div class="d_3">52.32</div>
                </div>
                <div class="box">
                    <img class="flashing-image" v-if="false" src="@/assets/images/digitalProduction/warning.png" alt="">
                    <div class="d_2">甲硫醇</div>
                    <div class="d_3">52.32</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.gas {
    position: absolute;
    width: vh(397);
    height: vh(131);
    right: vh(455);
    top: vh(115);
    // background: url(@/assets/images/home/left2.png) no-repeat;
    // background-size: 100% 100%;
    z-index: 998;
    background: rgba(0, 25, 35, 0.7);
    border: vh(1) solid #00B1E1;

    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: vh(6);
        padding-left: vh(15);
        padding-right: vh(15);

        .left-title {
            display: flex;
            gap: vh(10);
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: vh(14);
            color: #00DFFB;
            align-items: baseline;

            span {
                font-weight: 400;
                font-size: vh(12);
                color: #7FB4BB;
                line-height: vh(28);
            }
        }

        .more {
            color: rgba(0, 177, 225, 1);
            cursor: pointer;
        }
    }

    .line {
        width: vh(366);
        height: vh(1);
        background: #00C0FF;
        opacity: 0.2;
        margin: auto;
        margin-bottom: vh(10);
    }

    .content {
        .detail {
            display: flex;
            justify-content: space-between;
            padding-left: vh(20);
            padding-right: vh(20);

            .box {
                display: flex;
                align-items: baseline;
                gap: vh(8);

                img {
                    width: vh(15);
                    height: vh(15);
                }

                .d_2 {
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: vh(13);
                    color: #FFFFFF;
                }

                .d_3 {
                    font-family: DIN;
                    font-weight: bold;
                    font-size: vh(18);
                    color: #FFB03A;
                }
            }
        }

        .bottom {
            margin-bottom: vh(15);
        }
    }

    @keyframes flash {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .flashing-image {
        animation: flash 1s infinite;
    }

    .hidden-image {
        opacity: 0;
        /* 使图片完全透明，但占位 */
    }
}
</style>
